<template>
    <yd-layout title="RollNotice">

        <div class="demo-small-pitch">

            <div class="demo-rollnotice">
                <img src="//st.360buyimg.com/m/images/index/jd-news-tit.png">
                <yd-rollnotice autoplay="2000">
                    <yd-rollnotice-item><span style="color:#F00;">&nbsp;荐&nbsp;</span>荣耀V9 3月超级钜惠！</yd-rollnotice-item>
                    <yd-rollnotice-item><span style="color:#F00;">&nbsp;荐&nbsp;</span>3.23京东超级品牌日格力盛典</yd-rollnotice-item>
                    <yd-rollnotice-item><span style="color:#F00;">&nbsp;荐&nbsp;</span>京东服饰 早春新品低至7折</yd-rollnotice-item>
                </yd-rollnotice>
            </div>

            <yd-rollnotice align="center" height="50" autoplay="2000" class="demo-small-pitch">
                <yd-rollnotice-item>
                    设置高度！设置高度！<br/>
                    内容居中！内容居中！<br/>
                </yd-rollnotice-item>
                <yd-rollnotice-item>
                    2.5秒自动切换！<br>
                    2.5秒自动切换！<br>
                </yd-rollnotice-item>
                <yd-rollnotice-item>
                    京东服饰 早春新品低至7折 <br>
                    京东服饰 早春新品低至7折 <br>
                </yd-rollnotice-item>
            </yd-rollnotice>

            <yd-rollnotice direction="down" align="right" height="50" autoplay="2000" class="demo-small-pitch">
                <yd-rollnotice-item>
                    向下滚动！向下滚动！<br/>
                    向下滚动！向下滚动！<br/>
                </yd-rollnotice-item>
                <yd-rollnotice-item>
                    内容居右！内容居右！<br>
                    内容居右！内容居右！<br>
                </yd-rollnotice-item>
                <yd-rollnotice-item>
                    京东服饰 早春新品低至7折 <br>
                    京东服饰 早春新品低至7折 <br>
                </yd-rollnotice-item>
            </yd-rollnotice>

        </div>

    </yd-layout>
</template>
